<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--每个页面的title不一样-->
<head th:fragment="head(title)">
    <link rel="shortcut icon"  th:href="@{/images/favicon.ico}" th:src="@{/images/favicon.ico}">
    <meta charset="UTF-8">
    <title th:replace="${title}">贵工程小论坛</title>
    <!--    过渡动画-->
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<!--        代码高亮显示-->
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <!--    页面排版-->
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <!--    图标-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<!--    生成目录-->
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
    <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>

    <!--    平滑滚动-->
    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <!--    滚动监听-->
    <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<!--    看板娘-->
<!--    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>-->

<!--    网易云-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <script src="http://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <script src="http://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>

    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

    <style>
        .aplayer.aplayer-fixed .aplayer-body {
            bottom: 15px;
            left: 15px;
        }

    </style>
</head>
<body>
<!--导航栏-->
<!--menu(n)为了改变active选中的值-->
<nav th:fragment="menu(n)" class="ui secondary attached segment m-padded-tb-mini m-shadow-small animated  "  >
    <div class="ui  " >
        <div class="ui  secondary stackable menu middle aligned m-container-nav" >
            <h2 class="ui pink header item " th:href="@{/}" >贵工程论坛</h2>
<!--            th:classappend="${n==1}?'active'"  传进来的值是1就这class后增加样式active-->
            <a href="#"  th:href="@{/}" class="m-item item m-mobile-hide " th:classappend="${n==1}?'active'"><i class="  home icon"></i>首页</a>
            <a href="#" th:href="@{/tags/-1}" class="m-item item m-mobile-hide" th:classappend="${n==2}?'active'"><i class="bars icon" ></i>分类</a>
<!--            <a href="#" class="m-item item m-mobile-hide" th:classappend="${n==3}?'active'"><i class="music icon"></i>音乐盒</a>-->
            <a href="#" th:href="@{/message/allMessage}"class="m-item item m-mobile-hide" th:classappend="${n==3}?'active'"><i class="comments icon"></i>留言</a>
<!--            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4}?'active'"><i class="archive icon"></i>归档</a>-->
<!--            <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==5}?'active'"><i class="info icon"></i>关于</a>-->
            <a href="#" th:href="@{/publish}" class="m-item item m-mobile-hide" th:classappend="${n==4}?'active'" ><i class="add   icon"></i>发帖</a>
<!--            <div class="item " >-->
<!--                <a href="#" class=" teal mini  button m-padded-tb-small "  th:href="@{/publish}" style="height: 20px;line-height: 2px;color: #1abc9c"><i class="add  green icon"></i>发帖</a>-->
<!--            </div>-->


            <div class="  item m-mobile-hide" style="margin-left: 300px">
                <form name="search" action="#" method="post" th:action="@{/search}" target="_blank">
                <div class="ui icon  transparent input">
                    <input type="text" placeholder="请输入关键字 ..." name="query" th:value="${query}">
                    <i class="search link icon" onclick="document.forms['search'].submit()"></i>
                </div>
                    </form>
            </div>

            <div class="right m-item m-mobile-hide menu" >
                <a href="#" class="sign_in" th:classappend="${session.user}==null?'':'hide'" target="_blank" th:href="@{/user}">登录</a>
<!--                <a class="login" th:classappend="${session.user}==null?'':'hide'" target="_blank" "href="#">注册</a>-->
                <div class="ui dropdown  item" th:classappend="${session.user}==null?'hide':''">
                    <div class="text">
                        <!--            src="https://unsplash.it/100/100?image=1005"-->
                        <img class="ui avatar image" style="border-radius: 100%;width: 30px;height: 30px"  th:src="${session.user}!=null?${session.user.getAvatar()}:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091210%2Fxrr0cyds0fgxrr0cyds0fg.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619937017&t=596ec4cd43449ef747f1a237b77e6e38'"   >
                        <span th:text="${session.user}==null?'未登录':${session.user.getUsername()}">Izumi</span>
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a th:href="@{/user/toUpdatePage}"  class="item">修改密码</a>
                        <a th:href="@{/user/logout}"  class="item">注销</a>

                    </div>
                </div>
            </div>
            <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
                <i class="sidebar icon"></i>
            </a>
        </div>
    </div>
</nav>

<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide centered column">
                <img src="./static/images/wechat.jpg" th:src="@{/images/weChat.jpg}" class="ui rounded image " style="width: 120px" alt="">
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">版权归属</h4>
                <div class="ui inverted link list">
                    <p class="m-text-spaced m-text-thin ">  Copyright © 2021.06 凌月星辰 </p>
                    <p class="m-text-spaced m-text-thin m-opacity-mini">黔ICP备 2020076993号-1</p>

                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item m-text-thin">Email：3602047188@qq.com</a>
                    <a href="#" class="item m-text-thin">QQ：3602047188</a>
                </div>
            </div>
            <div class="seven wide column ">

                <h4 class="ui inverted header m-text-thin m-text-spaced ">校训</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">
                    明 &nbsp&nbsp 德 &nbsp&nbsp笃&nbsp&nbsp 学❤❤❤❤</p>
                <p class="m-text-thin m-text-spaced m-opacity-mini">
                    弘 &nbsp&nbsp 毅 &nbsp&nbsp力&nbsp&nbsp 行❤❤❤❤</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-spaced m-text-thin m-opacity-mini">贵州省毕节市贵工程 </p>
    </div>

</footer>
    <script type="text/javascript">

        // 悬停的时候下拉
        $('.ui.dropdown').dropdown({
            on: 'hover'
        })

        var browser = {
            versions: function () {
                var u = navigator.userAgent, app = navigator.appVersion;
                return {     //移动终端浏览器版本信息
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1 //是否web应用程序，没有头部与底部
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }
        if(!browser.versions.mobile){ //非移动端，动态加载js和div
            onload = function () {
            };
            var script1 = document.createElement('script');
            script1.type = 'text/javascript';
            script1.src = '\\js\\snow.js';

            <!-- 天气预报 -->
            WIDGET = {FID: 'EtgqPWMbdv'}
            var script4 = document.createElement('script');
            script4.type = 'text/javascript';
            script4.src = 'https://apip.weatherdt.com/float/static/js/r.js?v=1111';

            var script2 = document.createElement('script');
            script2.type = 'text/javascript';
            script2.src = '\\js\\click_show_text.js';

            var script3 = document.createElement('script');
            script3.type = 'text/javascript';
            script3.color = '220,220,220';
            script3.opacity = '0.7';//透明度
            script3.zIndex = '-2';
            script3.count = '200';
            script3.src = '//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js';

            /*live-2D*/
            var script5 = document.createElement('script');
            script5.type = 'text/javascript';
            script5.src = '\\js\\autoload.js';

            $('body').append(script2);
            $('body').append(script3);
        }



    </script>
</footer>
</body>
</html>
